/* eslint-disable max-len */
const path = require('path');
const fs = require('fs');

const {escape} = require('html-escaper');

const projectRoot = path.resolve(__dirname, '..');
const assetsRoot = path.join(projectRoot, 'public');

exports.renderViewer = renderViewer;

/**
 * Escapes `<` characters in JSON to safely use it in `<script>` tag.
 */
function escapeJson(json) {
  return JSON.stringify(json).replace(/</gu, '\\u003c');
}

function getAssetContent(filename) {
  const assetPath = path.join(assetsRoot, filename);

  if (!assetPath.startsWith(assetsRoot)) {
    throw new Error(`"${filename}" is outside of the assets root`);
  }

  return fs.readFileSync(assetPath, 'utf8');
}

function html(strings, ...values) {
  return strings.map((string, index) => `${string}${values[index] || ''}`).join('');
}

function getScript(filename, mode) {
  if (mode === 'static') {
    return `<!-- ${escape(filename)} -->
<script>${getAssetContent(filename)}</script>`;
  } else {
    return `<script src="${escape(filename)}"></script>`;
  }
}

function renderViewer({title, enableWebSocket, chartData, entrypoints, defaultSizes, compressionAlgorithm, mode} = {}) {
  return html`<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>${escape(title)}</title>
    <link rel="shortcut icon" href="" type="image/x-icon" />

    <script>
      window.enableWebSocket = ${escapeJson(enableWebSocket)};
    </script>
    ${getScript('viewer.js', mode)}
  </head>

  <body>
    <div id="app"></div>
    <script>
      window.chartData = ${escapeJson(chartData)};
      window.entrypoints = ${escapeJson(entrypoints)};
      window.defaultSizes = ${escapeJson(defaultSizes)};
      window.compressionAlgorithm = ${escapeJson(compressionAlgorithm)};
    </script>
  </body>
</html>`;
}
